<template>
  <div
    class="goodsbox"
    :class="goods.preId ? 'graybox' : ''"
    @click="linkToHjGoodsDetail(goods.busGoodsId, goods.goodsCode)"
  >
    <div class="goodsbox-top flex">
      <div class="goodsbox-top-img">
        <img
          onerror="javascript:this.src='https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/hongjiv3.0/icon/logo_xcc.png'"
          :src="goods.busGoodsImage || goods.image"
          alt=""
        >
      </div>
      <div class="goodsbox-top-price">
        <div class="goodsbox-top-price-title ellipsis2">
          <router-link
            class="a_sham"
            :to="{
              name: 'hjGoodsDetail',
              params: {
                id: goods.goodsCode + '&' + goods.busGoodsId
              }
            }"
            target="_blank"
            @click.native.stop
          >{{ goods.busGoodsName }}
          </router-link>
        </div>
        <div class="goodsbox-top-price-zb">
          <span class="colspan" style="margin-right: 6px">直播价</span>
          <span>
            <span style="font-size: 12px">￥</span>
            <span>{{
              (goods.priceSaleMin - goods.discountAmount)
                | minMax(goods.priceSaleMax - goods.discountAmount, {
                   fen: true,
                   unit: true
                 })
            }}</span>
          </span>
        </div>
        <div class="goodsbox-top-price-ls">
          <span class="colspan" style="margin-right: 6px">在售价</span>
          <span>￥{{
            goods.priceSaleMin
              | minMax(goods.priceSaleMax, { fen: true, unit: true })
          }}</span>
        </div>
      </div>
    </div>
    <div class="goodsbox-center flex">
      <div style="width:62px">
        <div class="coldata theme-xcc">{{ goods.expectCommissionPercent }}%</div>
        <div class="colspan">佣金比例</div>
      </div>
      <div class="flex-1">
        <div class="coldata">￥{{ goods.discountAmount | numDataFil }}</div>
        <div class="colspan">优惠金额</div>
      </div>
      <div style="width:60px">
        <div v-if="goods.serviceFee === null" class="coldata">纯佣</div>
        <div v-else class="coldata">￥{{ goods.serviceFee | f_number(0) }}</div>
        <div class="colspan">服务费</div>
      </div>
    </div>
    <div class="goodsbox-foot flex">
      <div>
        <span class="colspan">近30天销售</span>
        <span>{{ goods.totalSaleAmount | f_number(1) }}</span>
      </div>
      <div>
        <span class="colspan">近30天销售额</span>
        <span>￥{{ goods.totalSaleVolume | f_number(2, { fen: true }) }}</span>
      </div>
    </div>
    <div class="goodsbox-store flex">
      <div class="goodsbox-store-msg flex">
        <img :src="goods.linkPlatform | platformType" alt="">
        <span class="ellipsis" @click="$jumpLinks(goods.shopUrl)">{{
          goods.busShopName
        }}</span>
      </div>
      <div class="goodsbox-store-score">
        <span class="score">{{ goods.goodsScore | strDataFil }}分</span>
      </div>
    </div>
    <div v-if="goods.preId" class="goodsbox-btn" @click.stop="cancelSel">
      取消选品
    </div>
    <!-- <div v-else class="goodsbox-btn" @click.stop="$isAnchorUserJur(toSel)">
      加入选品库
    </div> -->
    <AnchorDialog v-else class="box-show" :title="'加入选品库'" @toSel="toSel" />
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    // id  对应busgoodsid 商品id   goodsId对应goodsCode  商品外网id
    linkToHjGoodsDetail(id, goodsId) {
      const url = this.$router.resolve({
        name: 'hjGoodsDetail',
        params: {
          id: goodsId + '&' + id
        }
      })
      window.open(url.href, '_blank')
    },
    cancelSel() {
      this.$emit('cancelSel', this.goods.preId)
    },
    toSel() {
      this.$emit('addSel', this.goods.busGoodsId)
    }
  }
}
</script>

<style scoped lang="scss">
.goodsbox {
  cursor: pointer;
  width: 298px;
  height: 239px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 28px;
  padding: 14px;
  background: #fff;
  border: 1px solid #fff;
  &-top {
    margin-bottom: 12px;
    &-img {
      width: 90px;
      height: 90px;
      margin-right: 12px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
    &-price {
      flex: 1;
      &-title {
        color: #333;
        line-height: 18px;
        margin-bottom: 7px;
      }
      &-zb {
        color: #ff0929;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 7px;
        font-weight: 500;
      }
      &-ls {
        font-size: 12px;
        color: #666;
      }
    }
  }
  &-center {
    width: 270px;
    height: 55px;
    background: #f9f9f9;
    border-radius: 2px;
    padding: 10px 14px;
    margin-bottom: 12px;
    > div {
      justify-content: space-around;
      width: 100%;
      text-align: center;
      font-size: 13px;
      .colspan {
        margin-bottom: 9px;
      }
      .coldata {
        color: #333;
      }
    }
  }
  &-foot {
    justify-content: space-between;
    font-size: 12px;
    color: #666666;
    margin-bottom: 10px;
    .colspan {
      margin-right: 7px;
    }
  }
  &-store {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    &-msg {
      align-items: center;
      width: 200px;
      flex: 1;
      img {
        width: 20px;
        height: 20px;
        margin-right: 12px;
        border-radius: 4px;
      }
    }
    &-score {
      color: #ff641b;
    }
  }
  &-btn {
    display: none;
    margin: 0 auto;
    font-weight: 500;
    color: #ff0929;
    width: 212px;
    height: 32px;
    line-height: 30px;
    border-radius: 17px;
    text-align: center;
    border: 1px solid #ff0929;
  }
  .box-show {
    display: none;
  }
}
.colspan {
  color: #999;
  font-size: 12px;
  font-weight: 400;
}
.goodsbox:hover {
  border: 1px solid #ff0929;
  height: 277px;
  margin: -19px 0 9px;
  .goodsbox-btn {
    display: block;
  }
  .box-show {
    display: block;
  }
}
.graybox:hover {
  border: 1px solid #cccccc;
  .goodsbox-btn {
    border: 1px solid #b2b2b2;
    color: #939292;
  }
}
</style>
